<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="case.css">

</head>

<body>
    <div class="header">
        <div class="header-icn">
            <ul class="header-right">
                <li><img src="img/iphon_03.png" alt=""></li>
                <li>0531-6065218</li>
                <li><img src="img/love_03.jpg" alt=""></li>
                <li><img src="img/love_05.jpg" alt=""></li>
                <li><img src="img/love_07.jpg" alt=""></li>
                <li><img src="img/love_09.png" alt=""></li>
            </ul>
            <ul class=" header-left">
                <li> <a href="index.html">网站首页</a> </li>
                <li> <a href="solution.html">传悦资源</a> </li>
                <li> <a href="case.html">传悦案例</a> </li>
                <li> <a href="">传悦服务</a> </li>
                <li><a href="solution.html">解决方案</a> </li>
                <li> <a href="">需求提交</a> </li>
            </ul>
            <div class="chuanyue"><img src="img/chuanyue.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banner-bot">
            <div class="banner-bot-icn">
                网站首页>传悦案例
            </div>
        </div>
    </div>
    <main>
        <div class="main-tit">
            <ul>
                <li>全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
        </div>
        <div class="mianList">
            <ul class="mianul">
                <li class="template" id="template">
                    <img src="img/c-img3.png" class="caseimg" alt="">
                    <h3 class="casetitle">众德集团 网站建设</h3>
                    <p class="casesynopsis">网站建设 品牌形象 整合营销 引导销售</p>
                </li>
            </ul>

        </div>
    </main>
    <div class="page">
        <ul>
            <li>
                <</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>></li>
        </ul>
    </div>
    <footer>
        <div class="foorer-icn">
            <div class="foorer-left">
                <img src="img/logo.png" alt="">
            </div>
            <div class="foorer-right">
                <ul class="right">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>付款账户</li>
                    <li>加入传悦</li>
                </ul>
                <ul class="left">
                    <li>Copyright</li>
                    <li>创梦网络科技有限责任公司</li>
                    <li>||</li>
                    <li>传悦Chnyoo.cn All Rights Reserved</li>
                    <li>京ICP备12005221号</li>
                </ul>

            </div>
        </div>

    </footer>

</body>
<script>
    let otemplate = document.querySelector(".template")
    let oul = document.querySelector(".mianul")
    let otit = document.querySelector(".main-tit ul")
    let lilist = document.querySelectorAll(".main-tit li")
    let list = document.querySelectorAll(".header-left li a")
    let ul = document.querySelector(".header-left")

    // console.log(lilist)
    list[0].className = "color"
    lilist[0].className = "chang"
    otit.onclick = function(event) {
        // alert(1)
        _this = event.target;
        lilist.forEach(function(item) {
            item.className = "";
        })
        _this.className = "chang"

    }

    ul.onclick = function(event) {
        // alert(1)
        _this = event.target;
        list.forEach(function(item) {
            item.className = "";
        })
        _this.className = "chang2"

    }

    function casejson(data) {
        console.log(data)
        data.forEach(function(item, i) {
            let newli = otemplate.cloneNode(true)
            newli.id = "";
            oul.appendChild(newli)
            newli.querySelector(".caseimg").setAttribute("sid", i + 1)
            newli.querySelector(".caseimg").src = item.img1
            newli.querySelector(".casetitle").src = item.casetitle
            newli.querySelector(".casesynopsis").src = item.casesynopsis
        })
    }

    //jsonp
    let obody = document.querySelector("body")
    let script = document.createElement("script");
    obody.appendChild(script)
    script.setAttribute("src", 'http://10.35.164.194:81/caselist?callback=casejson')

    oul.onclick = function(evt) {
        let e = evt || event;
        let _this = e.target;
        if (_this.className === "caseimg") {
            let id = _this.getAttribute("sid")
            console.log(id)
            window.location.href = `caselist.html?id=${id}`

        }
    }
</script>

</html>